<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq-Ajax的使用</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>

</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求 </h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
</body>
<script>
    // get
    $('button').eq(0).click(function(){
       $.get("http://127.0.0.1:8000/jquery-server",{a:100,b:200},function(data){
           console.log(data);
       },'json')
    })
    // post
    $('button').eq(1).click(function(){
       $.post("http://127.0.0.1:8000/jquery-server",{a:100,b:200},function(data){
           console.log(data);
       })
    })
    // 通用方法
    $('button').eq(2).click(function(){
       $.ajax({
           // 设置url
           url:'http://127.0.0.1:8000/jquery-server',
           // 参数
           data:{a:100,b:200},
           // 请求类型
           type:'GET',
           // 响应体的结果
           dataType:'json',
           // 成功的回调
           success:function(data,status){
               console.log(data,status);
           },
           timeout:2000,
           // 失败的回调
           error:function(){
               console.log('请求出错了');
           },
           // 头信息
           headers:{
               c:300,
               d:400
           }
       })
    })
</script>
</html>